import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState, useEffect, useRef } from "react";
import _ from "lodash";
import CpasIcon from "~/public/cpas-ui/components-ui/components/Icon";
import { nanoid10 } from "../../../../tools/Tools";
import { isOperatorTag } from "../../Tools/index";
import { toIntersect, objToArray, cpasToRowMerge, formatChildTree, isChildDataType, } from "./tools";
import { getDsToZlData } from "../../api/DesignTableApi";
import Draggable from "react-draggable";
import { MergeCellsOutlined,
// CheckOutlined,
 } from "@ant-design/icons";
import { Input, Checkbox, Card, Modal, message, TreeSelect, } from "antd";
import { Button } from "devextreme-react/button";
import "./_style.less";
const CheckboxGroup = Checkbox.Group;
const RowMergeModalComponent = (props) => {
    const { isOpen, handleOpen, _this } = props;
    const inputRef = useRef(null);
    const templateRowRef = useRef(null);
    const [selectColumnVal, setSelectColumnVal] = useState("");
    const [selectColumnNum, setSelectColumnNum] = useState(1);
    const [columnData, setColumnData] = useState([]);
    const [addInputVal, setAddInputVal] = useState(""); //新增参照行val
    const [plainOptions, setPlainOptions] = useState([]); //行项目数据
    const [rowsList, setRowsList] = useState([]); //已勾选的行项目数据
    const [templateList, setTemplateList] = useState([]); //参照行模版列表
    const [templateIndex, setTemplateIndex] = useState(null); //当前选中的模版
    const [templateCellData, setTemplateCellData] = useState({}); //模版参照行和其对应的行数据
    const [disabled, setDisabled] = useState(true);
    const [bounds, setBounds] = useState({
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
    });
    const draggleRef = useRef(null);
    const getRowProjectData = (columnNum) => {
        const { data } = _this.gridRef.dsSourceData;
        const isOperatorTagRes = isOperatorTag(data);
        let sourceData = data.slice(1);
        console.log(isOperatorTagRes, "isOperatorTagRes111");
        if (isOperatorTagRes) {
            sourceData = data.slice(1, data.length - 1);
        }
        let rowOptions = [];
        if (columnNum) {
            for (let i = 0; i < sourceData.length; i++) {
                const currentData = sourceData[i];
                const currentVal = currentData[columnNum];
                const currentStr = currentData[currentData.length - 1];
                const currentCfg = currentStr ? JSON.parse(currentStr) : {};
                const rId = nanoid10();
                rowOptions.push({
                    label: `${currentVal}`,
                    value: `${currentVal}`,
                    rId: currentCfg.rId ? currentCfg.rId : rId,
                    key: currentCfg.rId ? currentCfg.rId : rId,
                    config: {
                        ...currentCfg,
                    },
                });
            }
            console.log(columnNum, "columnVal---rowOptions", rowOptions);
        }
        setPlainOptions([...rowOptions]);
    };
    //获取列数据
    const getColumnData = () => {
        const { header } = _this.gridRef.dsSourceData;
        const headerData = header.slice(1, header.length - 1);
        let selcetOptions = [];
        for (let i = 0; i < headerData.length; i++) {
            const currentHead = headerData[i];
            let prevHeadChildLen = 0;
            if (i > 0) {
                const prevHead = headerData[i - 1];
                if (prevHead?.children && prevHead?.children.length) {
                    prevHeadChildLen =
                        prevHead?.children && prevHead?.children.length
                            ? prevHead?.children.length - 1
                            : 0;
                }
            }
            const columnNum = i + 1 + prevHeadChildLen;
            headerData[i].columnNum = columnNum;
            const headChild = currentHead.children;
            if ((currentHead?.type === "text" ||
                currentHead?.config?.type === "text") &&
                !headChild) {
                !currentHead?.config?.isRuntime &&
                    selcetOptions.push({
                        key: headerData[i].columnNum,
                        label: currentHead.label,
                        columnNum: headerData[i].columnNum,
                        value: `${currentHead.label}${headerData[i].columnNum}${i}`,
                    });
            }
            if (headChild && headChild.length) {
                const isChildData = isChildDataType(headChild, "text");
                if (isChildData) {
                    const children = formatChildTree(currentHead.children, columnNum, "text");
                    selcetOptions.push({
                        key: headerData[i].columnNum,
                        label: currentHead.label,
                        columnNum: headerData[i].columnNum,
                        value: `${currentHead.label}${headerData[i].columnNum}${i}`,
                        children,
                    });
                }
            }
        }
        setColumnData([...selcetOptions]);
        return selcetOptions;
    };
    const loadFetchApi = async () => {
        const columnData = await getColumnData();
        const { tableConfig = {} } = _this.gridRef.getCpasTableGrid();
        const { rowMergeCfg = {} } = tableConfig;
        const { columnNum, rowsData } = rowMergeCfg;
        const currentColumnNum = columnNum ? columnNum : selectColumnNum;
        if (currentColumnNum && columnData && columnData.length) {
            setSelectColumnNum(currentColumnNum);
            const currentColumn = columnData.filter((item) => item.columnNum === currentColumnNum);
            currentColumn &&
                currentColumn.length &&
                setSelectColumnVal(currentColumn[0].value);
            await getRowProjectData(currentColumnNum);
        }
        else if (!currentColumnNum && columnData && columnData.length) {
            const currentData = columnData[0];
            setSelectColumnVal(currentData.value);
            await getRowProjectData(currentData.columnNum);
        }
        //await getRowProjectData(selectColumnNum);
        if (rowsData && rowsData.length) {
            const { queryTemplateList, queryRowsList, queryTemplateCellData } = cpasToRowMerge(rowsData);
            console.log(queryTemplateList, "queryTemplateList1111111", queryRowsList, "queryRowsList", queryTemplateCellData, "queryTemplateCellData111");
            setTemplateCellData({
                ...queryTemplateCellData,
            });
            setRowsList([...queryRowsList]);
            setTemplateList([...queryTemplateList]);
            if (queryTemplateList && queryTemplateList.length) {
                handleTemplate(queryTemplateList[0].id, queryTemplateList[0].value);
            }
        }
        else {
            setTemplateCellData({});
            setRowsList([]);
            setTemplateList([]);
        }
    };
    useEffect(() => {
        loadFetchApi();
    }, [isOpen]);
    const onSelectChange = (value, label, extra) => {
        const columnNum = extra.triggerNode.props.columnNum
            ? extra.triggerNode.props.columnNum
            : 0;
        console.log(value, "value select column", columnNum);
        setSelectColumnVal(value);
        setSelectColumnNum(columnNum);
        getRowProjectData(columnNum);
        //setRowsList([]);
    };
    const onInputChange = (e) => {
        const val = e.target.value;
        setAddInputVal(val);
        let newPlainOptions = [...plainOptions];
        if (newPlainOptions.length) {
            newPlainOptions = newPlainOptions.map((item) => {
                if (rowsList.includes(item.value)) {
                    item.disabled = true;
                }
                return item;
            });
            setPlainOptions([...newPlainOptions]);
        }
    };
    const onCheckChange = (list) => {
        const currentList = [...list];
        console.log(list, "check change list");
        if (!Object.keys(templateCellData).length) {
            return message.error("请点击新增创建模版参照行");
        }
        if (!templateIndex || (templateIndex && !templateCellData[templateIndex])) {
            return message.error("请先点击选择要匹配的参照行，再进行勾选");
        }
        if (templateCellData &&
            Object.keys(templateCellData).length > 0 &&
            currentList.length) {
            for (let key in templateCellData) {
                const itemData = templateCellData[key];
                if (key !== templateIndex) {
                    for (let i = 0; i < itemData.length; i++) {
                        const val = itemData[i];
                        let otherValIndex = currentList.indexOf(val);
                        if (otherValIndex !== -1) {
                            currentList.splice(otherValIndex, 1); //找到当前已勾选到的行数据，（list为所有勾选数据）
                        }
                    }
                }
            }
        }
        if (templateIndex) {
            const historyData = templateCellData[templateIndex];
            let diffData = [];
            for (let i = 0; i < historyData.length; i++) {
                const value = historyData[i];
                const isRepeat = plainOptions.filter((item) => item.value === value);
                if (!isRepeat || !isRepeat.length) {
                    diffData.push(value);
                }
            }
            setTemplateCellData({
                ...templateCellData,
                [templateIndex]: Array.from(new Set([...diffData, ...currentList])),
            });
        }
        setRowsList(list);
    };
    const mergeRowOperation = () => { };
    const onFinishSave = async () => {
        const newTemplateCellData = { ...templateCellData };
        const newTemplateList = [...templateList];
        const newRowsList = [...rowsList];
        const newPlainOptions = [...plainOptions];
        let rowsData = [];
        //const hiddenRowsPlugin = hot.getPlugin("hiddenRows");
        let mergeRow = [];
        for (let key in newTemplateCellData) {
            const currentList = newTemplateList.filter((item) => item.id === key);
            const cellData = newTemplateCellData[key];
            const rowValue = currentList && currentList[0] ? currentList[0].value : "";
            if (cellData && cellData.length) {
                for (let i = 0; i < cellData.length; i++) {
                    if (cellData[i]) {
                        cellData[i] = cellData[i].toString().trim();
                    }
                }
                let intersectData = toIntersect(newRowsList, cellData); //求数据交集
                //已勾选数据
                const checkedData = newPlainOptions.filter((item) => {
                    return intersectData.includes(item.value);
                });
                let rowArray = []; //勾选行号存储
                let rowConfig = {};
                let rowTags = [];
                let rowValues = [];
                if (checkedData && checkedData.length) {
                    for (let i = 0; i < checkedData.length; i++) {
                        rowArray.push(checkedData[i].rId);
                        rowValues.push(checkedData[i].value);
                        // const tags = checkedData[i]?.config?.r_tag;
                        // if (tags && tags.length) {
                        //   rowTags.push(...tags);
                        // }
                    }
                }
                if (cellData && cellData.length) {
                    for (let i = 0; i < cellData.length; i++) {
                        const value = cellData[i];
                        const res = newPlainOptions.filter((item) => item.value === value);
                        if (res && res.length) {
                            const tags = res[0]?.config?.r_tag;
                            tags && rowTags.push(...tags);
                        }
                    }
                }
                //cpastable中data项目列有跟模版参照行的数据重复，需要处理默认归并@0826邵宏提的需求
                if (rowValue) {
                    const rowRes = newPlainOptions.filter((item) => item.value === rowValue);
                    const rowId = rowRes && rowRes[0] ? rowRes[0]?.config.rId : "";
                    const isTemplateRes = checkedData.filter((item) => item.key === rowId); //是否查到已勾选模版参照行的数据
                    //如果没有需要手动push进去
                    if (rowId &&
                        rowRes &&
                        rowRes.length &&
                        (!isTemplateRes || !isTemplateRes.length) &&
                        checkedData &&
                        checkedData.length) {
                        rowArray.push(rowId);
                        rowValues.push(rowRes[0].value);
                    }
                }
                mergeRow.push(rowArray);
                rowsData.push({
                    columnNum: selectColumnNum,
                    id: key,
                    value: rowValue,
                    cellData,
                    config: {
                        r_tag: [...new Set(rowTags)],
                    },
                    rowValues,
                    mergeRowIds: rowArray, //合并的行号
                    // checkedData, //已勾选行数据
                });
            }
            if (!cellData.length && currentList && currentList.length) {
                rowsData.push({
                    columnNum: selectColumnNum,
                    id: key,
                    value: rowValue,
                    cellData: [],
                    mergeRowIds: [],
                    checkedData: [], //已勾选行数据
                });
            }
        }
        const dsSourceData = _this.gridRef.dsSourceData;
        const { tableConfig } = _this.gridRef.getCpasTableGrid();
        const dsFormulaSourceData = _this.gridRef.props.dsTableRef.getFormulaSourceData();
        let newTableCfg = {
            ...tableConfig,
        };
        console.log(newTableCfg, "newTableCfg", rowsData, "mergeRow111", mergeRow);
        if (!rowsData.length) {
            delete newTableCfg.rowMergeCfg;
        }
        else {
            newTableCfg = {
                ...tableConfig,
                rowMergeCfg: {
                    columnNum: selectColumnNum,
                    rowsData,
                    mergeRow,
                },
            };
        }
        console.log(newTableCfg, "newTableCfg");
        try {
            const tid = _this?.gridRef?.props?.notes?.tid;
            const zlTableData = await getDsToZlData(dsSourceData, newTableCfg, dsFormulaSourceData, tid);
            console.log(zlTableData, "zlTableData");
            if (zlTableData && zlTableData.data) {
                const zlTransformData = zlTableData.data;
                //zlGridData 除了拆表的转数逻辑 , 数据库会存储该数据
                //zlDivideData 拆表后的转数逻辑
                //zlGridData 存储在隐藏的CpasTable中，为了ref正确使用, 真正渲染调用afterDivideTableRender用数组。
                const { zlGridData, zlDivideData } = zlTransformData;
                await _this.gridRef.reloadTable(zlGridData, "zl", dsSourceData);
                const refs = await _this.gridRef.afterDivideTableRender(zlDivideData);
                //更新整理模式下cpastable实例
                _this.gridRef && _this.gridRef?.dsTableRef?.setZlCpasTableRefs(refs);
                handleOpen(false);
                message.success("归并操作成功");
                _this.gridRef.setTableContentChange(true, {
                    type: "行归并保存",
                    params: {
                        ...newTableCfg.rowMergeCfg,
                    },
                });
            }
        }
        catch (e) {
            message.error("归并操作失败，请检查配置项重试");
            throw e;
        }
    };
    const onInputConfirm = () => {
        if (addInputVal) {
            const isRepeat = templateList.filter((item) => item.value === addInputVal);
            if (isRepeat && isRepeat.length) {
                return message.error("输入的参照行有重复，请重新输入");
            }
            const oId = nanoid10();
            setTemplateList([
                ...templateList,
                {
                    value: addInputVal,
                    id: oId,
                },
            ]);
            setAddInputVal("");
            setTemplateCellData({
                ...templateCellData,
                [oId]: [addInputVal],
            });
            let newRowsList = [...rowsList];
            let newPlainOptions = [...plainOptions];
            const isRowOption = newPlainOptions.filter((item) => item.value === addInputVal);
            if (!newRowsList.includes(addInputVal) &&
                isRowOption &&
                isRowOption.length) {
                newRowsList.push(addInputVal);
                newPlainOptions = newPlainOptions.map((item) => {
                    if (item.value === addInputVal) {
                        item.disabled = true;
                    }
                    return {
                        ...item,
                    };
                });
                setRowsList([...newRowsList]);
                setPlainOptions([...newPlainOptions]);
            }
        }
    };
    const onDelCellChange = (value, rowId) => {
        console.log("del cell change", rowId);
        let newCellData = { ...templateCellData };
        const rowItemData = newCellData[rowId];
        const newRowList = [...rowsList];
        const rowIndex = newRowList.indexOf(value);
        if (rowIndex !== -1) {
            newRowList.splice(rowIndex, 1);
        }
        const newPlainOptions = plainOptions.map((item) => {
            if (item.value === value) {
                item.disabled = false;
            }
            return item;
        });
        setPlainOptions([...newPlainOptions]);
        setRowsList([...newRowList]);
        if (rowItemData && rowItemData.length && rowItemData.includes(value)) {
            const result = rowItemData.filter((itemVal) => itemVal !== value);
            newCellData[rowId] = [...result];
            setTemplateCellData({
                ...newCellData,
            });
        }
    };
    const onCancel = () => {
        console.log("onCancel");
        if (columnData && columnData.length) {
            setSelectColumnNum(columnData[0].columnNum);
        }
        else {
            setSelectColumnNum(null);
        }
        handleOpen(false);
    };
    const onClearTable = async () => {
        const newPlainOptions = plainOptions.map((item) => {
            item.disabled = false;
            return item;
        });
        setTemplateList([]);
        setPlainOptions([...newPlainOptions]);
        setTemplateCellData({});
        setRowsList([]);
        setTemplateCellData({});
        delete _this.gridRef.tableConfig["rowMergeCfg"];
        const dsSourceData = _this.gridRef.dsSourceData;
        const dsFormulaSourceData = _this.gridRef.props.dsTableRef.getFormulaSourceData();
        const tableConfig = _this.gridRef.tableConfig;
        try {
            /**本地调试专用 */
            /*let res: any = {};
            const data = cpasSourceDataToMergeData(
              dsSourceData,
              newTableCfg,
            );
            res.data = data;*/
            const tid = _this?.gridRef?.props?.notes?.tid;
            const zlTableData = await getDsToZlData(dsSourceData, {
                ...tableConfig,
            }, dsFormulaSourceData, tid);
            console.log(zlTableData, "zlTableData");
            if (zlTableData && zlTableData.data) {
                const zlTransformData = zlTableData.data;
                //zlGridData 除了拆表的转数逻辑 , 数据库会存储该数据
                //zlDivideData 拆表后的转数逻辑
                //zlGridData 存储在隐藏的CpasTable中，为了ref正确使用, 真正渲染调用afterDivideTableRender用数组。
                const { zlGridData, zlDivideData } = zlTransformData;
                await _this.gridRef.reloadTable(zlGridData, "zl", dsSourceData);
                const refs = await _this.gridRef.afterDivideTableRender(zlDivideData);
                //更新整理模式下cpastable实例
                _this.gridRef && _this.gridRef?.dsTableRef?.setZlCpasTableRefs(refs);
                handleOpen(false);
                message.success("归并清空操作成功");
                _this.gridRef.setTableContentChange(true, {
                    type: "行归并清空",
                    params: {},
                });
            }
        }
        catch (e) {
            message.error("归并操作失败，请检查配置项重试");
            throw e;
        }
    };
    const handleTemplate = (rowId, value) => {
        console.log("click row", value);
        if (templateCellData && Object.keys(templateCellData).length > 0) {
            const { selectedData, noSelectedData } = objToArray(templateCellData, rowId);
            const newPlainOptions = plainOptions.map((item, i) => {
                for (let j = 0; j < noSelectedData.length; j++) {
                    if (item.value == noSelectedData[j]) {
                        item.disabled = true;
                    }
                }
                for (let j = 0; j < selectedData.length; j++) {
                    if (item.value == selectedData[j]) {
                        item.disabled = false;
                    }
                    if (item.value === value && value === selectedData[j]) {
                        item.disabled = true;
                    }
                }
                return item;
            });
            setPlainOptions(newPlainOptions);
        }
        setTemplateIndex(rowId);
    };
    const onRowChange = (e) => {
        console.log("row change");
        const rowId = e.target.dataset.rowId;
        const value = e.target.value;
        let oldValue = "";
        const newTemplateList = templateList.map((item) => {
            if (item.id === rowId) {
                oldValue = item.value;
                item.value = value;
            }
            return item;
        });
        const newTemplateCellData = { ...templateCellData };
        const cellDatas = newTemplateCellData[rowId];
        if (!cellDatas.includes(value)) {
            let arr = cellDatas.filter((val) => val !== oldValue);
            arr.push(value);
            newTemplateCellData[rowId] = arr;
            setTemplateCellData({ ...newTemplateCellData });
        }
        setTemplateList([...newTemplateList]);
        let newRowsList = [...rowsList];
        let newPlainOptions = [...plainOptions];
        if (!value) {
            return;
        }
        if (newPlainOptions.length) {
            newPlainOptions = newPlainOptions.map((item) => {
                if (item.value === value && !newRowsList.includes(value)) {
                    newRowsList.push(value);
                }
                if (newTemplateCellData[rowId].includes(item.value)) {
                    item.disabled = false;
                }
                if (!newRowsList.includes(value) && item.disabled) {
                    item.disabled = false;
                }
                if (newRowsList.includes(value) && value === item.value) {
                    item.disabled = true;
                }
                return item;
            });
            setPlainOptions([...newPlainOptions]);
        }
        newRowsList = newRowsList.filter((row) => row !== oldValue);
        setRowsList([...newRowsList]);
    };
    const onRowDelChange = (e, value, rowId) => {
        console.log("row del", rowId);
        const newRowsList = [...rowsList];
        const newTemplateList = templateList.filter((item) => {
            return item.id !== rowId;
        });
        const newTemplateCellData = { ...templateCellData };
        const currentCellData = newTemplateCellData[rowId];
        delete newTemplateCellData[rowId];
        if (currentCellData && currentCellData.length) {
            const newPlainOptions = plainOptions.map((item) => {
                for (let i = 0; i < currentCellData.length; i++) {
                    const val = currentCellData[i];
                    if (item.value === val) {
                        const rowIndex = newRowsList.indexOf(val);
                        newRowsList.splice(rowIndex, 1);
                        item.disabled = false;
                        delete item.disabled;
                    }
                }
                return item;
            });
            setPlainOptions([...newPlainOptions]);
            setRowsList([...newRowsList]);
        }
        console.log(newTemplateCellData, "newTemplateCellData del");
        setTemplateCellData({ ...newTemplateCellData });
        setTemplateList([...newTemplateList]);
        e.stopPropagation();
    };
    const onAddCellSpan = (rowId) => {
        const newTemplateCellData = { ...templateCellData };
        for (let key in newTemplateCellData) {
            if (key === rowId) {
                newTemplateCellData[key].push("");
            }
        }
        setTemplateCellData({ ...newTemplateCellData });
    };
    const onCellSpanBlur = (e, rowVal) => {
        console.log("blur111", e);
        const value = e.target.value;
        const rowId = e.target.dataset.rowId;
        const oIndex = e.target.dataset.oindex;
        const newRowsList = [...rowsList];
        const newTemplateCellData = { ...templateCellData };
        let newPlainOptions = [...plainOptions];
        if (!value) {
            return;
        }
        if (newPlainOptions.length) {
            newPlainOptions = newPlainOptions.map((item) => {
                if (item.value === value && !newRowsList.includes(value)) {
                    newRowsList.push(value);
                }
                if (newTemplateCellData[rowId].includes(item.value)) {
                    item.disabled = false;
                }
                else if (newRowsList.includes(item.value) &&
                    !newRowsList.includes(value)) {
                    item.disabled = true;
                }
                if (item.value === rowVal) {
                    item.disabled = true;
                }
                return item;
            });
            setPlainOptions([...newPlainOptions]);
        }
        const rowIndex = newRowsList.indexOf(value);
        //修改因子的情况下，文本框内容包含当前值,就取消右侧勾选
        setRowsList([...newRowsList]);
    };
    const onCellSpanChange = (e) => {
        console.log("change111");
        const value = e.target.value;
        const rowId = e.target.dataset.rowId;
        const oindex = e.target.dataset.oindex;
        let newTemplateCellData = { ...templateCellData };
        const currentCellData = newTemplateCellData[rowId];
        if (currentCellData.includes(value)) {
            return message.error("输入的名称有重复，请重新输入");
        }
        if (currentCellData && currentCellData.length) {
            newTemplateCellData[rowId][oindex] = value;
        }
        setTemplateCellData({ ...newTemplateCellData });
    };
    const tableSettingLeft = () => {
        return (_jsxs(React.Fragment, { children: [_jsx(MergeCellsOutlined, { style: { color: "green" } }), " \u884C\u5F52\u5E76"] }));
    };
    const tableSettingRight = () => {
        return (_jsxs(React.Fragment, { children: [_jsx(Button, { onClick: () => onClearTable(), type: "default", children: "\u884C\u5F52\u5E76\u6E05\u7A7A" }), _jsx(Button, { onClick: () => onFinishSave(), type: "default", children: "\u786E\u5B9A" })] }));
    };
    const renderSpan = (data, rowId, rowVal) => {
        let res = [];
        for (let i = 0; i < data.length; i++) {
            const val = data[i];
            res.push(_jsx(_Fragment, { children: _jsx(Input, { className: "merge-template-span", 
                    //defaultValue={val}
                    value: val, "data-oindex": i, onBlur: (e) => onCellSpanBlur(e, rowVal), "data-row-id": rowId, onChange: onCellSpanChange, disabled: val === rowVal ? true : false, suffix: val === rowVal ? null : (_jsx(CpasIcon, { type: "icon-close1", className: "cpas-icon", onClick: () => onDelCellChange(val, rowId) })) }) }));
        }
        return res;
    };
    const renderTemplateCell = (row, rowId) => {
        let res = [];
        for (let key in templateCellData) {
            const data = templateCellData[key];
            if (key === rowId) {
                res.push(_jsx("div", { className: "merge-template-cell", ref: templateRowRef, "data-item-value": row, children: renderSpan(data, key, row) }));
            }
        }
        return res;
    };
    const templateItems = templateList.map((item, index) => {
        return (_jsxs("div", { className: "merge-template-item", children: [_jsx("div", { className: "merge-template-title", onClick: () => handleTemplate(item.id, item.value), children: _jsx(Input, { value: item.value, "data-row-id": item.id, onChange: onRowChange, 
                        //onClick={() => handleTemplate(item.id)}
                        className: "merge-template-input", suffix: _jsx(CpasIcon, { type: "icon-close1", className: "cpas-icon", onClick: (e) => onRowDelChange(e, item.value, item.id) }) }) }), _jsxs("div", { className: "merge-template-ri", children: [renderTemplateCell(item.value, item.id), _jsx(CpasIcon, { type: "icon-add-circle1", className: "cpas-icon", onClick: () => onAddCellSpan(item.id) })] })] }, index));
    });
    const renderCheckBox = () => {
        let res = [];
        for (let i = 0; i < plainOptions.length; i++) {
            const current = plainOptions[i];
            res.push(_jsx("div", { children: _jsx(Checkbox, { value: current.value, disabled: current.disabled, children: plainOptions[i].label }) }, i));
        }
        return res;
    };
    const renderCheckGroup = (key) => {
        return (_jsx("div", { children: _jsx(CheckboxGroup, { value: rowsList, 
                //disabled={disabled}
                onChange: onCheckChange, children: renderCheckBox() }) }, key));
    };
    const onStart = (_event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = draggleRef.current?.getBoundingClientRect();
        if (!targetRect) {
            return;
        }
        setBounds({
            left: -targetRect.left + uiData.x,
            right: clientWidth - (targetRect.right - uiData.x),
            top: -targetRect.top + uiData.y,
            bottom: clientHeight - (targetRect.bottom - uiData.y),
        });
    };
    console.log(columnData, "columnData---");
    return (_jsx(React.Fragment, { children: _jsx(Modal, { open: isOpen, width: "90%", onCancel: onCancel, footer: null, className: "setting zl-modal", keyboard: false, maskClosable: false, destroyOnClose: true, forceRender: true, title: _jsx(Card, { title: tableSettingLeft(), extra: tableSettingRight(), bordered: false, className: "merge-card-title", style: {
                    cursor: "move",
                }, onMouseOver: () => {
                    if (disabled) {
                        setDisabled(false);
                    }
                }, onMouseOut: () => {
                    setDisabled(true);
                }, 
                // fix eslintjsx-a11y/mouse-events-have-key-events
                // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
                onFocus: () => { }, onBlur: () => { } }), modalRender: (modal) => (_jsx(Draggable, { disabled: disabled, bounds: bounds, nodeRef: draggleRef, onStart: (event, uiData) => onStart(event, uiData), children: _jsx("div", { ref: draggleRef, children: modal }) })), children: _jsxs("div", { className: "merge-card-content", children: [_jsxs("div", { className: "merge-row", children: [_jsx("div", { className: "merge-title", children: "\u884C\u9879\u76EE" }), _jsx(TreeSelect, { onChange: onSelectChange, dropdownMatchSelectWidth: false, treeData: columnData, treeDefaultExpandAll: true, style: { width: 150 }, value: selectColumnVal }), _jsx("div", { className: "merge-row-list", children: renderCheckGroup(selectColumnVal) })] }), _jsxs("div", { className: "merge-template", children: [_jsx("div", { className: "merge-title", children: "\u6A21\u7248\u53C2\u7167\u884C" }), _jsx("div", { className: "merge-template-list", children: templateItems }), _jsx("div", { className: "merge-template-add", children: _jsxs("div", { className: "merge-input-box", children: [_jsx(Input, { className: "merge-input", ref: inputRef, value: addInputVal, defaultValue: addInputVal, onChange: onInputChange }), _jsx(Button, { onClick: _.debounce(onInputConfirm, 500), type: "default", children: "\u65B0\u589E" })] }) })] })] }) }) }));
};
export default RowMergeModalComponent;
